<template>
  <div>
       
          <el-form  ref="userInfo" 
              :model="userInfo"
              label-width="80px"         
              :rules="rules"   
                        
          >
              <el-form-item label="手机号" prop='phonenumber'>
                <el-input v-model="userInfo.phonenumber"></el-input>
              </el-form-item>     
              <el-form-item label="密码" prop='password'>
                <el-input v-model="userInfo.password"></el-input>
              </el-form-item>                
              
              <!-- <el-form-item label="">
                <el-radio-group v-model="storage">
                  <el-radio label="一周内免登录"></el-radio>
                  
                </el-radio-group>
              </el-form-item>                            -->
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">登录</el-button>
                <el-button @click="cancel">取消</el-button>
              </el-form-item>
              <div class="changeCode" @click='changeCode'>
              <span>手机验证码登录</span>             
            </div>
          </el-form>                
  </div>
</template>

<script>
import {pwdLogin} from '@/networdk/user'
import { Message } from 'element-ui'
export default {
  name:'loginView',
  data() {
    let checkPhone = (rule,value,callback)=>{
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
     
      if(!value){
        callback()
      } else {
        if(phoneReg.test(value)){
          callback()
        } else{
          callback(new Error('手机号不能为空，并且是11位数字'))
        }
      }
    }
     let checkPwd = (rule,value,callback)=>{
      let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/
     
      if(!value){
        callback()
      } else {
        if(pwdReg.test(value)){
          callback()
        } else{
          callback(new Error('密码不能为空，且是6-15位的数字和字母组成'))
        }
      }
    }
    return {
        isCode:0, // 0表示验证码登录。1表示密码登录 
        userInfo:{
          phonenumber : '',
          password:'',
          type:[] ,    
        },
        // dialogVisible:false,
      
      storage:false,
      
        rules:{
         phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ],
          password:[
            {
              required:'true',
              trigger:'blur',             
              validator:checkPwd,
              message:'密码不能为空，且是6-15位的数字和字母组成'
            }
          ]  
      },

      rule1:{
        phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ],
      }
      
   

      // rules: {
      //     phonenumber: [
      //       {
      //         required:'true',
      //         trigger:'blur',                            
      //         validator:checkPhone,
      //         message:'手机号不能为空，并且是11位数字',
      //       }
      //     ],
      //     password:[
      //       {
      //         required:'true',
      //         trigger:'blur',             
      //         validator:checkPwd,
      //         message:'密码不能为空，且是6-15位的数字和字母组成'
      //       }
      //     ]          
      //   }
     
    }
  },
  props:{
    dialogVisible : Boolean,
    currentType:Number,
    isShow:Boolean
  },
  computed:{
    changeRules(){
      return this.isCode === 0 ? this.rules1 : ''
    }
  },
  methods: {
   
    register(){
      console.log('点击了注册');
      
      this.$router.push('/register')
    },

    // 手机号+密码登录
    onSubmit(){
      const _Message = Message     
      this.$refs.userInfo.validate((valid)=>{
        console.log(valid);
        if(!valid){          
          _Message({
            type:'error',
            message:'请输入正确的信息格式'
          })
          return;
        } else {        
            let phonenumber = this.userInfo.phonenumber
              let password = this.userInfo.password
              // console.log(phonenumber,password);
              pwdLogin({phonenumber,password}).then(res=>{
                console.log('进入密码登录界面');
                console.log(res);      

                if(res.data.code === 0){
                    _Message({
                      type:'success',
                      message:res.data.data.msg
                      // 跳转页面
                    })
                    console.log(res.data.data.data[0].token);
                    let  userToken = 'Bearer' + res.data.data.data[0].token
                    this.$store.commit('setToken',userToken)
                    this.$router.replace('/')
                  
                } else {
                    _Message({
                      type:'warning',
                      message:res.data.data.msg
                    })
                }
              })               
        }        
      })
    },

    // 手机号+验证码登录
    codeLogin(){
      this.userInfo = {}
      this.$refs.userInfo.clearValidate()
      this.$refs.codeInfo.validate((valid)=>{
        console.log(valid);
      })
    },
    // 切换到用验证码登录
    changeCode(){
        this.$emit('changeCode')
    },


    // 切换到用密码登录
    changePwd(){
      this.isShow = !this.isShow
      // this.isCode = 1
    },
    sendCode(){
      
      console.log('获取短信验证码');
    },
    // 验证信息提示
    // validate(key){
    //   let bool = true
    //   if( !this.rules[key].rule.test(this[key])) {
    //       // 正则不匹配 ，提示信息
    //       console.log('不批欸');
    //       bool = false
    //       return false
    //   }
    //   return bool
    // }

    cancel(){
      console.log('点击关闭 --- login');
      this.$emit('cancel')
      this.$refs['userInfo'].resetFields()
    }
  },
}
</script>

<style scoped>
.pwd{
  margin-top: 30px;
}

.register{
  float: right;
  padding-bottom: 30px;
  color: red;
}

.sendCode{
  font-size: 12px;
  font-weight: bold;
  color:black;
}
</style>